<template>
    <div class="w-100 h-100 p-4 border-box bg-deep color-white flex-item font3">
        <div class="flex-content ml-4 h-100 p-4 border-box bg-cover round-md color-white">
            
            <!-- 上半部分表单（设置参数和显示信息） -->
            <div class="top-form" style="margin-bottom: 20px;">
                <div style="margin: 10px 0px">
                    <el-button type="primary" @click="showAddDialog()"> 
                        <i class="el-icon-circle-plus-outline"></i>设置
                    </el-button>
                </div>
                <el-table class="w-100 custom" size="large" :data="SettingsData">
                    <!-- 表格列配置 -->
                    <el-table-column prop="pond_number" label="塘口号" align="center"></el-table-column>
                    <el-table-column prop="feeder_number" label="投饲机号" align="center"></el-table-column>
                    <el-table-column prop="fish_quantity" label="鱼数量/条" align="center"></el-table-column>
                    <el-table-column prop="fish_specification" label="鱼规格/g" align="center"></el-table-column>
                    <el-table-column prop="feed_coefficient" label="饲料系数" align="center"></el-table-column>
                    <el-table-column prop="daily_feed_rate" label="日饵率" align="center"></el-table-column>
                    <el-table-column prop="set_date" label="设置日期" align="center"></el-table-column>
                    <el-table-column prop="modify_date" label="修改日期" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" width="220px">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" @click="editData(scope.row)">编辑</el-button>
                            <el-button type="warning" icon="el-icon-delete" @click="DeleteData(scope.row)">删除</el-button>
                          </template>
                      </el-table-column>
                    <!-- 添加其他表格列 -->
                </el-table>
            
                <el-dialog :visible.sync="editDialogVisible" title="编辑数据">
                    <el-form :model="editForm" label-width="100px">
                      <el-form-item label="塘口号">
                        <el-input v-model="editForm.pond_number" disabled></el-input>
                      </el-form-item>
                      <el-form-item label="投饲机号">
                        <el-input v-model="editForm.feeder_number"></el-input>
                      </el-form-item>
                      <el-form-item label="鱼数量/条">
                        <el-input v-model="editForm.fish_quantity"></el-input>
                      </el-form-item>
                      <el-form-item label="鱼规格/g">
                        <el-input v-model="editForm.fish_specification"></el-input>
                      </el-form-item>
                      <el-form-item label="饲料系数">
                        <el-input v-model="editForm.feed_coefficient"></el-input>
                      </el-form-item>
                      <el-form-item label="日饵率">
                        <el-input v-model="editForm.daily_feed_rate"></el-input>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary" @click="EditSettings() ">保存</el-button>
                        <el-button @click="editDialogVisible = false">取消</el-button>
                      </el-form-item>
                    </el-form>
                  </el-dialog>
                 <!-- 上半部分表单分页 -->
                 <div class="text-right mt-4 pr-4">
                    <el-pagination
                        @size-change="onSizeChange"
                        @current-change="onCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageSize"
                        :total="total"
                        layout="total, sizes, prev, pager, next, jumper"
                    ></el-pagination>
                </div>
            </div>

            <!-- 下半部分表单（显示数据） -->
            <div class="bottom-form" style="margin-top: 150px;">

                <el-select v-model="selectedPondNumber" placeholder="选择塘口号" @change="filterByPondNumber()">
                    <el-option
                        v-for="pond in pondNumbers"
                        :key="pond"
                        :label="pond"
                        :value="pond">
                    </el-option>
                </el-select>

                <el-table class="w-100 custom" size="large" :data="DisplayData">
                    <!-- 表格列配置 -->
                    <el-table-column prop="pond_number" label="塘口号" align="center"></el-table-column>
                    <el-table-column prop="feeder_number" label="投饲机号" align="center"></el-table-column>
                    <el-table-column prop="plan_date" label="计划日期" align="center"></el-table-column>
                    <el-table-column prop="daily_feed_amount" label="每日计划投饲量/g" align="center"></el-table-column>
                    <el-table-column prop="total_feed_amount" label="计划投喂总量/g" align="center"></el-table-column>
                    <el-table-column prop="total_fish_weight" label="计划鱼总重/g" align="center"></el-table-column>
                    <el-table-column prop="fish_quantity" label="鱼数量/条" align="center"></el-table-column>
                    <el-table-column prop="fish_specification" label="鱼规格/g" align="center"></el-table-column>
                    <el-table-column prop="feed_coefficient" label="饲料系数" align="center"></el-table-column>
                    <el-table-column prop="daily_feed_rate" label="日饵率" align="center"></el-table-column>
                    <!-- 添加其他表格列 -->
                </el-table>
            </div>
            <!--新增对话框-->>
            <el-dialog :visible.sync="addDialogVisible" title="新增设置信息" width="30%">
                <el-form :model="newSettingsForm" label-width="80px">
                    <!-- 塘口号 -->
                    <el-form-item label="塘口号" prop="pond_number">
                        <el-input v-model="newSettingsForm.pond_number"></el-input>
                    </el-form-item>
            
                    <!-- 投饲机号 -->
                    <el-form-item label="投饲机号" prop="feeder_number">
                        <el-input v-model="newSettingsForm.feeder_number"></el-input>
                    </el-form-item>
            
                    <!-- 鱼数量 -->
                    <el-form-item label="鱼数量" prop="fish_quantity">
                        <el-input v-model="newSettingsForm.fish_quantity"></el-input>
                    </el-form-item>
            
                    <!-- 鱼规格 -->
                    <el-form-item label="鱼规格" prop="fish_specification">
                        <el-input v-model="newSettingsForm.fish_specification"></el-input>
                    </el-form-item>
            
                    <!-- 饲料系数 -->
                    <el-form-item label="饲料系数" prop="feed_coefficient">
                        <el-input v-model="newSettingsForm.feed_coefficient"></el-input>
                    </el-form-item>
            
                    <!-- 日饵率 -->
                    <el-form-item label="日饵率" prop="daily_feed_rate">
                        <el-input v-model="newSettingsForm.daily_feed_rate"></el-input>
                    </el-form-item>
   
            
                    <!-- 其他表单项 -->
                </el-form>
            
                <div slot="footer" class="dialog-footer">
                    <el-button @click="closeAddDialog()">取消</el-button>
                    <el-button type="primary" @click="addNewSettings()">确定</el-button>
                </div>
            </el-dialog>
            <!-- 分页部分 -->
            <div class="text-right mt-4 pr-4">
                <el-pagination class="custom" background @size-change="onSizeChange" @current-change="onCurrentChange"
                    :current-page="currentPage" :page-sizes="[20, 40, 80, 160]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>


  <script>
  import { AddSettings,GetSettings,GetDailyData,EditSettings,DeleteSetting} from '@/request/api';
  export default {
  name: 'tousiplan',
  data() {
    return {
      addDialogVisible: false, // 控制设置对话框的显示状态
      editDialogVisible: false,
      newSettingsForm:{
        pond_number:'',
        feeder_number:'',
        fish_quantity:'',
        fish_specification:'',
        feed_coefficient:'',
        daily_feed_rate:'',
        set_date:'',
      },
      editForm: { // 修改设置表单数据
      id: '',
      pond_number: '',
      feeder_number: '',
      fish_quantity: '',
      fish_specification: '',
      feed_coefficient: '',
      daily_feed_rate: '',
      set_date:'',
    },
      SettingsData:[],
      DisplayData:[],
      allData:[],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      selectedPondNumber:null, // 用于存储用户选择的塘口号
      pondNumbers: ['b2-1', 'b2-2', 'b2-3','b2-4'],
    };
},
computed: {
        selectClass() {
            // 根据条件返回样式类
            if (this.selectedPondNumber) {
                return 'custom-select-active';
            } else {
                return 'custom-select';
            }
        }
},
mounted() {
    // 在页面加载时按顺序获取人员数据和每日数据
    this.loadData();
},
methods: {
    async loadData() {
        // 首先获取人员数据
        await this.getSettingsData();
        
        // 在人员数据获取完成后，再获取每日数据
        await this.getDailyData();
    },
    async getSettingsData() {
        GetSettings() // 假设 GetSettings 是用于从后端获取设置信息的函数
        .then(response => {
            // 检查 response.settings 是否已定义
            if (response.settings) {
                // 假设 response.settings 是一个列表
                console.log(response.settings);
                this.SettingsData = response.settings;
                // 将 settings 数组保存到 this.SettingsData 中
            }
        })
        .catch(error => {
            console.error('An error occurred while fetching settings data:', error);
        });
    },
    async getDailyData() {
        GetDailyData() // 假设 GetSettings 是用于从后端获取设置信息的函数
        .then(response => {
            // 检查 response.settings 是否已定义
            if (response.FishFeedingPlan) {
                // 假设 response.settings 是一个列表
                console.log(response.FishFeedingPlan);
                this.allData = response.FishFeedingPlan;
                this.DisplayData=this.allData;
                // 将 settings 数组保存到 this.SettingsData 中
            }
        })
        .catch(error => {
            console.error('An error occurred while fetching settings data:', error);
        });
    },
    addNewSettings() {
        // 将设置信息保存到数据中
        const newSettings = {
            // 填入设置信息字段
            pond_number: this.newSettingsForm.pond_number,
            feeder_number: this.newSettingsForm.feeder_number,
            fish_quantity: this.newSettingsForm.fish_quantity,
            fish_specification: this.newSettingsForm.fish_specification,
            feed_coefficient: this.newSettingsForm.feed_coefficient,
            daily_feed_rate: this.newSettingsForm.daily_feed_rate,
            // 其他设置信息字段
        };

        // 添加完成后关闭对话框
        console.log('New Settings Data:', newSettings);
        this.closeAddDialog();

        // 调用后端接口添加设置信息
        this.addSettingsToBackend(newSettings);
    },
addSettingsToBackend(newSettings) {
        AddSettings(newSettings) // 假设 AddSettings 是你用于将设置信息添加到后端的函数
            .then(response => {
                console.log('Settings added successfully'); 
                // 在成功添加设置信息后，可以调用方法刷新数据
                this.getSettingsData();
            })
            .catch(error => {
                // 如果发生错误，可以在这里进行错误处理
                console.error('An error occurred:', error);
            });
},
filterByPondNumber() {
            // 如果没有选择任何塘口号，则显示所有数据
            if (!this.selectedPondNumber) {
                this.DisplayData = this.allData;
                console.log('Selected Pond Number:', this.selectedPondNumber);
                 console.log('All Data:', this.allData);

                return;
            }
            
            // 根据所选择的塘口号筛选数据
            this.DisplayData = this.allData.filter(item => item.pond_number === this.selectedPondNumber);
},
showAddDialog() { // 显示新增人员对话框
          this.addDialogVisible = true;
},
  closeAddDialog() { // 关闭新增人员对话框
          this.addDialogVisible = false;
},
  showEditDialog() { // 显示修改人员对话框
          this.editDialogVisible = true;
},
  closeEditDialog() { // 关闭修改人员对话框
          this.editDialogVisible = false;
},
  show_message(message, type) {
        this.$message({
            message: message,
            type: type
            });
},
 onSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getList();
      console.log("nnnnnnnnnnnnn")
      console.log(this.getList)
},
    // 页码改变
  onCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getList();//
},
editData(row) {
    const id = row.id;
    this.editForm.id = id;
    this.editForm = { ...row }; 
    this.showEditDialog();
    },
EditSettings() {
  // 创建一个对象，包含要编辑的塘口设置数据
  const editPondSettings = {
    id:this.editForm.id,
    pond_number: this.editForm.pond_number,
    feeder_number: this.editForm.feeder_number,
    fish_quantity: this.editForm.fish_quantity,
    fish_specification: this.editForm.fish_specification,
    feed_coefficient: this.editForm.feed_coefficient,
    daily_feed_rate: this.editForm.daily_feed_rate,
    set_date: this.editForm.set_date,
  };
  
  // 打印编辑的塘口设置数据
  console.log('Edit Pond Settings Data:', editPondSettings);
  
  // 关闭编辑对话框
  this.closeEditDialog();

  // 调用后端接口修改塘口设置信息
  this.editPondSettingsToBackend(editPondSettings);
},
editPondSettingsToBackend(editPondSettings) {
    // 调用后端接口 EditPondSettings，传入编辑后的塘口设置信息
    EditSettings(editPondSettings)
        .then(response => {
            // 更新数据（例如刷新列表数据）
            this.loadData();
            
            // 显示成功消息
            this.show_message('塘口信息修改成功', 'success');
            
            console.log('123'); // 您可以根据需要添加日志信息
        })
        .catch(error => {
            // 如果发生错误，可以在这里进行错误处理
            console.error('发生错误:', error);
            
            // 显示错误消息
            this.show_message('塘口信息修改失败', 'error');
        });
},
DeleteData(row) {//先找到展示中的要删除的数据
      this.$confirm('确认删除', '提示框').then(() => {
        // console.log(row)
        let id1 = this.SettingsData.findIndex(item => {
          if (item.id == row.id) {
            return true
          }
        })
        DeleteSetting({
          ID: row.id
        }).then(
          res => {
            this.show_message('删除成功', 'success');// 删除成功
            this.getSettingsData();
          }
        ).catch(err => {
          this.show_message('删除失败' + err, 'warning')
        })
        // 显示成功的操作
      }).catch(err => {
        this.show_message('取消删除', 'warning')
      })
    },
}
}
</script>

<style lang="less" scoped>
@import '~@/assets/style/variable.less';

/deep/ .el-tree {
  background: transparent;
  color: @colorWhite;
}
.custom-select {
    background-color: lightblue;
}
.custom-select-active {
    background-color: lightgreen;
}
</style>